<template>
    <view class="container">
        <view class="tui-bg-box">
            <image src="/static/images/login/bg_login.png" class="tui-bg-img"></image>
            <image src="/static/images/my/mine_def_touxiang_3x.png" class="tui-photo"></image>
            <view class="tui-login-name">象牙云</view>
        </view>

        <tui-form :report-submit="true" @submit="formLogin">
            <view class="tui-login-from">
                <tui-input v-model="post_data.username" label="手机" class="thorui-input" placeholder="请输入手机号"
                    placeholder-class="thorui-phcolor" maxlength="11"></tui-input>
                <tui-input v-model="post_data.code" v-if="bind_type==1" label="验证码" class="thorui-input"
                    placeholder="请输入验证码" placeholder-class="thorui-phcolor" maxlength="6">
                    <template slot="right">
                        <view class="send_code">获取验证码</view>
                    </template>
                </tui-input>
                <tui-input v-model="post_data.password" v-if="bind_type==0" label="密码" class="thorui-input"
                    placeholder="请输入密码" type="password" placeholder-class="thorui-phcolor" maxlength="32">
                </tui-input>
                <tui-list-cell :hover="false" unlined padding="20rpx 30rpx">
                    <view class="use_type_switch">
                        <text @click="use_type_switch">{{bind_type==1?'使用密码登录':'使用验证码登录'}}</text>
                    </view>
                </tui-list-cell>

                <tui-list-cell :hover="false" unlined padding="20rpx 30rpx">
                    <tui-button @click='login' class="tui-btn-submit" hover-class="tui-button-hover">登录</tui-button>
                </tui-list-cell>
                <view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
                    点击"登录"即表示已同意
                    <text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
                </view>
            </view>
        </tui-form>
    </view>
</template>

<script>
    import {
        mapMutations
    } from 'vuex';
    import util from '@/utils/util.js'
    import form from '@/components/common/tui-validation/tui-validation.js'
    export default {
        data() {
            return {
                disabled: false,
                btnText: '获取验证码',
                mobile: '',
                type: 'primary',
                code: '',
                bind_type: 0,
                post_data: {
                    username: '18108018820',
                    password: '123456',
                    code: ''
                }
            };
        },
        methods: {
            ...mapMutations(['login']),
            getRandom: function(u) {
                let rnd = '';
                u = u || 6;
                for (var i = 0; i < u; i++) {
                    rnd += Math.floor(Math.random() * 10);
                }
                return rnd;
            },
            use_type_switch: function() {
                if (this.bind_type == 1) {
                    this.bind_type = 0;
                } else {
                    this.bind_type = 1;
                }
            },
            login: function() {
                this.tui.request('/api/password_login', this.post_data)
                    .then(res => {
                        console.log(res)
                        if (res.code == 200) {
                            uni.setStorageSync('token', res.data.token);
                            this.tui.toast(res.message)
                            uni.reLaunch({
                                url: '/pages/tabbar/mine'
                            });
                        }
                    }).catch(e => {
                        console.log(e)
                    })
            },
            doLoop: function(seconds) {
                let code = this.getRandom(6);
                this.tui.toast('您本次的验证码是：' + code, 5000);
                seconds = seconds ? seconds : 60;
                this.btnText = seconds + 's后获取';
                this.code = code;
                let countdown = setInterval(() => {
                    if (seconds > 0) {
                        this.btnText = seconds + 's后获取';
                        --seconds;
                    } else {
                        this.btnText = '获取验证码';
                        this.disabled = false;
                        this.type = 'primary';
                        clearInterval(countdown);
                    }
                }, 1000);
            },
            btnSend: function() {
                let rules = [{
                    name: 'mobile',
                    rule: ['required', 'isMobile'],
                    msg: ['请输入手机号码', '请输入正确的手机号码']
                }];
                //进行表单检查
                let formData = {
                    mobile: this.mobile
                };
                let checkRes = form.validation(formData, rules);
                if (!checkRes) {
                    this.disabled = true;
                    this.btnText = '请稍候...';
                    this.type = 'gray';

                    setTimeout(() => {
                        this.doLoop(60);
                    }, 500);
                } else {
                    this.tui.toast(checkRes);
                }
            },
            formLogin: function(e) {
                let loginCode = e.detail.value.smsCode;
                let mobile = e.detail.value.mobile;
                let rules = [{
                        name: 'mobile',
                        rule: ['required', 'isMobile'],
                        msg: ['请输入手机号码', '请输入正确的手机号码']
                    },
                    {
                        name: 'loginCode',
                        rule: ['required', 'isSame:code'],
                        msg: ['请输入验证码', '验证码不正确']
                    }
                ];
                //进行表单检查
                let formData = {
                    mobile: mobile,
                    loginCode: loginCode,
                    code: this.code
                };
                let checkRes = form.validation(formData, rules);
                if (checkRes) {
                    this.tui.toast(checkRes);
                    return;
                }
                let format = util.formatNumber(mobile);
                uni.setStorageSync('thorui_mobile', format);
                let state = {
                    mobile: format
                };
                this.login(state);
                this.tui.toast('登录成功', 2000, true);
                setTimeout(() => {
                    uni.reLaunch({
                        url: '/pages/tabbar/my/my'
                    });
                }, 200);
            },
            protocol: function() {
                uni.navigateTo({
                    url: '/pages/doc/protocol/protocol'
                });
            }
        }
    };
</script>

<style>
    page {
        background-color: #fff;
    }

    .send_code {
        color: #5677fc
    }

    .use_type_switch {
        margin-top: 15rpx;
        text-align: right;
        color: #AFAFAF;
        margin-bottom: 20rpx;
    }

    .tui-bg-box {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        padding-top: 44rpx;
    }

    .tui-photo {
        height: 138rpx;
        width: 138rpx;
        display: block;
        margin: 10rpx auto 0 auto;
        border-radius: 50%;
        position: relative;
        z-index: 2;
    }

    .tui-login-name {
        width: 128rpx;
        height: 40rpx;
        font-size: 30rpx;
        color: #fff;
        margin: 36rpx auto 0 auto;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .tui-bg-img {
        width: 100%;
        height: 346rpx;
        display: block;
        position: absolute;
        top: 0;
    }

    .tui-login-from {
        width: 100%;
        padding-top: 128rpx;
        box-sizing: border-box;
    }

    .tui-btn-submit {
        margin: 140rpx 20rpx;
    }

    .tui-protocol {
        color: #333;
        font-size: 24rpx;
        text-align: center;
        width: 100%;
        margin-top: 29rpx;
    }

    .tui-protocol-red {
        color: #5677fc !important;
    }
</style>
